Echarts使用

吴龙淼 写于 2021-08-20

安装

npm install echarts --save

引入

<script src="echarts.min.js"></script>

初始化

echarts.init(document.getElementById('main')).setOption(option);

option={
//标题
title{text:'',}
//提示信息
//坐标轴指示器配置项
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
//控制显示系列
legend:{
    data:[]
}
//x坐标
xAxis{
 type: 'category',
 data:[]
}
//y坐标
yAxis{
data:[]
}
//具体图表类型
 series: [
        {
            name:,
            type: 'bar',//line,pie,scatter,tree,map
            data: swjg_Array,
            itemStyle: {
            normal: {
              color: function (params) {
                //蓝色
                var colorList = [
                  '#2894FF', '#FF8000'
                ];
                return colorList[0];
              }
            }
          }
        }
dataset:{
    sourse:[],

},
//媒体查询
 media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {
                 minWidth: 200,
                maxHeight: 300,
                minAspectRatio: 1.3
},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则,表示『默认』,
            option: {       // 即所有规则都不满足时,采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
}


myChart.on('click', function (params) {
    // 在用户点击后控制台打印数据的名称
    console.log(params);
});